<template>
	<cc-theme-wrapper>
		<view class="cc-card">
			<view class="hot-wrap">
				<scroll-view scroll-x class="goods-container" :show-scrollbar="false">
					<view class="goods-inner-container">
						<view v-for="(goods, index) in goodsList" :key="index" class="goods-card"
							@click="goToDetail(goods.id)">
							<image :src="goods.image" mode="aspectFill" class="goods-image"></image>
							<view class="hot-tag">{{goods.tag}}</view>
							<view class="goods-info">
								<text class="goods-name">{{ goods.name }}</text>
								<view class="price-add">
									<text class="goods-price">¥{{ goods.price.toFixed(1) }}</text>
									<view class="add-btn" @click.stop="addToCart(goods.id)">
										<uni-icons type="plusempty" size="16" color="#fff"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</cc-theme-wrapper>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';


	[{
		"tagName": "globalConfiguration",
		"radio": 4,
		"radioB": 1,
		"imgIndex": 0,
		"inputtype": 0,
		"boxShadow": "0 2px 10px 0 #0000000a",
		"pageMarginsNum": {
			"left": 12,
			"right": 12
		},
		"angle": {
			"customAll": "12",
			"angleroundedIcon": 0,
			"upperrightselectIcon": 0,
			"lowerrightselectIcon": 0,
			"lowerleftselectIcon": 0
		},
		"show_content": true
	}, {
		"title": "自由容器",
		"tagName": "自由容器",
		"type": "free",
		"height": 32,
		"bottom": 10,
		"top": 12,
		"left": 12,
		"right": 12,
		"radius": 12,
		"bgcolor": "rgba(255, 255, 255, 0)",
		"content": [],
		"id": "id1744271176.2249801",
		"icon": "design-container",
		"hidden": "1",
		"radius_then": false,
		"radius_bottom": 47,
		"radius_left": 94,
		"radius_right": 69,
		"radius_top": 72,
		"shadow": "",
		"zindex": 0,
		"show_content": false
	}, {
		"title": "轮播图",
		"tagName": "轮播图",
		"id": "id1755076382.7067787",
		"style": "A",
		"w": 0,
		"h": 0,
		"autoplay": true,
		"intervalSet": 4,
		"interval": 4000,
		"opendio": true,
		"windicator": 0,
		"hindicator": 0,
		"leftindicator": 0,
		"topindicator": 0,
		"wdio": 4,
		"hdio": 4,
		"radiusdio": 4,
		"wHover": 4,
		"hHover": 4,
		"radiusHover": 4,
		"idindicator": "id21755076382.4389309",
		"list": [{
			"url": "https://zhyx.eingdong.com/systemImage/banner.png"
		}],
		"bilayerList": [{
			"first_url": "https://zhyx.eingdong.com/systemImage/banner.png",
			"two_url": ""
		}],
		"radius_open": true,
		"height": 375,
		"swiperImageMode": "scaleToFill",
		"swiperImgHeight": 202,
		"swiperImgWidth": 375,
		"showImgButton": false,
		"swiperImgRadius": 0,
		"swiperImgRadiusTop": 0,
		"swiperImgRadiusLeft": 0,
		"swiperImgRadiusBottom": 0,
		"swiperImgRadiusRight": 0,
		"swiperImgPreviousMargin": 10,
		"swiperImgNextMargin": 0,
		"imgButtonStyle": {
			"name": "plus",
			"wechatName": "add",
			"text": "图标1",
			"color": "#22BF64",
			"size": "20"
		},
		"gap": 0,
		"icon": "home_banner",
		"type": "common",
		"bottom": 0,
		"radius_top": 0,
		"radius_bottom": 0,
		"radius_left": 0,
		"radius_right": 0,
		"radius_then": false,
		"radius": 0,
		"indicatorStyle": 2,
		"indicatorPosition": "center",
		"indicatorColor": 1,
		"paddingBottom": 20,
		"bgcolor": "rgba(255, 255, 255, 0.4)",
		"bgcolorHover": "rgba(255, 255, 255, 1)",
		"onOff": true,
		"gradient": false,
		"top": 0,
		"left": 0,
		"right": 0,
		"disabled_system": true
	}, {
		"title": "轮播图",
		"tagName": "轮播图",
		"id": "id1755076580.2153391",
		"style": "A",
		"w": 0,
		"h": 0,
		"autoplay": true,
		"intervalSet": 4,
		"interval": 4000,
		"opendio": true,
		"windicator": 0,
		"hindicator": 0,
		"leftindicator": 0,
		"topindicator": 0,
		"wdio": 4,
		"hdio": 4,
		"radiusdio": 4,
		"wHover": 4,
		"hHover": 4,
		"radiusHover": 4,
		"idindicator": "id21755076580.9698284",
		"list": [{
			"url": "https://zhyx.eingdong.com/systemImage/banner.png"
		}],
		"bilayerList": [{
			"first_url": "https://zhyx.eingdong.com/systemImage/banner.png",
			"two_url": ""
		}],
		"radius_open": true,
		"height": 375,
		"swiperImageMode": "scaleToFill",
		"swiperImgHeight": 202,
		"swiperImgWidth": 375,
		"showImgButton": false,
		"swiperImgRadius": 0,
		"swiperImgRadiusTop": 0,
		"swiperImgRadiusLeft": 0,
		"swiperImgRadiusBottom": 0,
		"swiperImgRadiusRight": 0,
		"swiperImgPreviousMargin": 10,
		"swiperImgNextMargin": 0,
		"imgButtonStyle": {
			"name": "plus",
			"wechatName": "add",
			"text": "图标1",
			"color": "#22BF64",
			"size": "20"
		},
		"gap": 0,
		"icon": "home_banner",
		"type": "common",
		"bottom": 0,
		"radius_top": 0,
		"radius_bottom": 0,
		"radius_left": 0,
		"radius_right": 0,
		"radius_then": false,
		"radius": 0,
		"indicatorStyle": 2,
		"indicatorPosition": "center",
		"indicatorColor": 1,
		"paddingBottom": 20,
		"bgcolor": "rgba(255, 255, 255, 0.4)",
		"bgcolorHover": "rgba(255, 255, 255, 1)",
		"onOff": true,
		"gradient": false,
		"top": 0,
		"left": 0,
		"right": 0,
		"disabled_system": true
	}]

	// 热门产品数据
	const goodsList = ref([{
			id: 1,
			name: '经典珍珠奶茶',
			price: 18,
			image: '/static/images/products/1.jpg',
			tag: '热卖'
		},
		{
			id: 2,
			name: '芋泥波波奶茶',
			price: 22,
			image: '/static/images/products/2.png',
			tag: '新品'
		},
		{
			id: 3,
			name: '草莓果茶',
			price: 20,
			image: '/static/images/products/3.png',
			tag: '热卖'
		},
		{
			id: 4,
			name: '蓝莓雪冰',
			price: 23,
			image: '/static/images/products/4.png',
			tag: '热卖'
		},
		{
			id: 5,
			name: '桂花乌龙茶',
			price: 19,
			image: '/static/images/products/5.png',
			tag: '热卖'
		},
		{
			id: 6,
			name: '抹茶拿铁',
			price: 25,
			image: '/static/images/products/6.png',
			tag: '热卖'
		}
	])
</script>

<style lang="scss" scoped>
	@import "@/style/var.scss";

	/* 卡片 */
	.cc-card {
		border-radius: 0rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		margin: 0rpx 20rpx 15rpx 20rpx;
	}

	.hot-wrap {
		padding: 30rpx;
	}

	/* 章节标题 */
	.hot-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.hot-title {
		font-size: $uni-font-size-xl;
		font-weight: 700;
		color: $uni-text-color;
		position: relative;
		display: inline-block;
		margin-bottom: 30rpx;

		&::after {
			content: '';
			position: absolute;
			bottom: -10rpx;
			left: 0;
			width: 60rpx;
			height: 6rpx;
			background-color: var(--cc-primary-color);
			border-radius: 3rpx;
		}
	}

	.view-more {
		display: flex;
		align-items: center;
	}

	.view-more-text {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin-right: 10rpx;
	}

	/* 热门产品横向滚动 */
	.goods-container {
		white-space: nowrap;
		width: 100%;
	}

	.goods-inner-container {
		padding: 10rpx 0;
	}

	.goods-card {
		width: 280rpx;
		margin-right: 20rpx;
		border-radius: $uni-border-radius-base;
		background-color: $uni-bg-color;
		overflow: hidden;
		box-shadow: $uni-shadow-sm;
		display: inline-block;
		position: relative;
		transition: 0.3s all;

		&:active {
			transform: scale(0.98);
		}
	}

	.goods-image {
		width: 100%;
		height: 280rpx;
		object-fit: cover;
	}

	.hot-tag {
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		background: linear-gradient(135deg, #FF6B6B, #000000);
		color: white;
		padding: 4rpx 12rpx;
		border-radius: $uni-border-radius-sm;
		font-size: $uni-font-size-sm;
		font-weight: 600;
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
	}

	.goods-info {
		padding: 16rpx 8rpx;
	}

	.goods-name {
		font-size: $uni-font-size-sm;
		font-weight: 500;
		color: $uni-text-color;
		white-space: normal;
		display: block;
	}

	.price-add {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.goods-price {
		font-size: $uni-font-size-base;
		font-weight: 600;
	}

	.add-btn {
		width: 35rpx;
		height: 35rpx;
		border-radius: 20%;
		background: $uni-primary-color;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: 0.3s all;
		position: relative;

		.badge {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			color: #fff;
			background: $uni-primary-color;
			line-height: 30rpx;
			text-align: center;
			top: -20rpx;
			right: -20rpx;
			border: 1rpx solid #fff;
			border-radius: 50%;
			font-size: 20rpx;
			font-weight: bold;
		}

		&:active {
			transform: scale(0.9);
		}
	}
</style>